<template>
  <div class="question-header border-bottom">
    <div class="header-search">
      <i class="iconfont icon-sousuo"></i>
      <input type="text" placeholder="请输入搜索关键字">
    </div>
    <swiper :options="swiperOptions">
      <swiper-slide>
        <div class="header-item" :class="{active: isActive == 0 ? true: false}" @click="isActive=0">包装工程</div>
      </swiper-slide>
      <swiper-slide>
        <div class="header-item" :class="{active: isActive == 1 ? true: false}" @click="isActive=1">包装设计</div>
      </swiper-slide>
      <swiper-slide>
        <div class="header-item" :class="{active: isActive == 2 ? true: false}" @click="isActive=2">印刷工程</div>
      </swiper-slide>
      <swiper-slide>
        <div class="header-item" :class="{active: isActive == 3 ? true: false}" @click="isActive=3">高分子材料</div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'QuestionHeader',
  data: function () {
    return {
      isActive: 0,
      swiperOptions: {
        paginationClickable: true,
        slidesPerView: 3.3,
        spaceBetween: -50,
        // loop: true,
        autoplay: false,
        observer: true,
        observeParents: true
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/stylus/varibles.styl'
.question-header
  height 1.6rem
  font-size 0
  padding .1rem 0.15rem .1rem 0.15rem
  box-sizing border-box
  margin-top .04rem
  .header-search
    width 100%
    color $themeColor
    height .6rem
    margin-bottom .2rem
    position relative
    &>i
      height .6rem
      line-height .6rem
      position absolute
      color #bbb
      top 0
      left 0.18rem
    &>input
      text-align center
      width 100%
      color #bbb
      font-size $fontSize
      padding .05rem 0.2rem 0.05rem .6rem
      border-radius .5rem
      box-sizing border-box
      background-color #f5f7fa
  .header-item
    height .6rem
    line-height .6rem
    font-size .36rem
    display inline-block
    vertical-align top
    border 2px solid $themeColor
    background-color $themeColor
    color $fontColor
    border-radius .4rem
    padding 0 .15rem
    margin-right .1rem
    box-sizing border-box
  .active
    background-color $bgColor
</style>
